<template>
  <view class="add-container" v-if="show" :style="{right: right, top: top}">
    <view class="content">添加到我的小程序，随时学习</view>
    <view @click="show = false" class="img-close">
      <image class="icon" src="@/static/home/bai_guanbi.png"></image>
    </view>
    <view class="triangle" :style="{right:tRight}"></view>
  </view>
</template>

<script>
export default {
  name: "AddMineMinProgram",
  data() {
    return {
      right: '0',
      top: '0',
      tRight: '0',
      show: false
    }
  },
  created() {
    // #ifdef MP-WEIXIN
    wx.checkIsAddedToMyMiniProgram({
      success: ({added}) => {
        if (!added) {
          this.showTips()
          setTimeout(() => {
            this.show = false
            console.log('hide')
          }, 3000)
        }
      }
    })
    // #endif
  },
  methods: {
    showTips() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      console.log('xx', menuButtonInfo)
      this.right = '10px'
      this.top = (menuButtonInfo.top + menuButtonInfo.height + 10) + 'px'
      this.tRight = (menuButtonInfo.width / 2 + 10) + 'px'
      this.show = true
    }
  }
}
</script>

<style scoped lang="scss">
.add-container {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 100;
  color: #fff;
  border-radius: 5px;
  display: flex;

  .content {
    margin: 10rpx 15rpx;
  }

  .img-close {
    margin-left: 10rpx;
    margin-right: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      width: 20rpx;
      height: 22rpx;
    }
  }

  .triangle {
    width: 0;
    height: 0;
    top: -10px;
    border-bottom: 10px solid rgba(0, 0, 0, 0.8);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
  }
}
</style>
